import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage, injectIntl } from 'react-intl';
import {

  Modal,
  Row,
  Col,
  TextField,
  Select,

  TextArea,
  Button,
} from '@folio/stripes/components';

class VerifyCafe extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open:true,
      item:{}
    };
  }

    handleSubmit=(item) => {
      const request = item;
      const {intl} = this.props;
      if (confirm(intl.formatMessage({id:"ui-party.other.are.you.sure.you.want.to.do.this"}))) {
        const auditDescription = document.getElementById('auditDescription');
        const approvalStatus = document.getElementById('status');
        request.approval = approvalStatus.value;
        request.remark = auditDescription.value;
        this.props.verifyDataCommit(request);
      }
    }

    hideConfirm=() => {
      this.props.openReview('');
    }

    render() {
      const {
        verifyParams,
        verifyOpen
      } = this.props;
      const {intl} = this.props;
      const footer = (
        <Row center="xs">

          <Col xs={12}>

            <Button onClick={e => this.handleSubmit(verifyParams)} style={{ float:'left' }}>
                <FormattedMessage id="ui-party.saveAndExit" />
              </Button>

            <Button onClick={e => this.hideConfirm(this)}>
                <FormattedMessage id="ui-party.cancel" />
              </Button>

          </Col>
        </Row>

      );

      return (

        <Modal
          open={verifyOpen}
          dismissible
          closeOnBackgroundClick
          onClose={() => {
            this.hideConfirm();
          }}
          label={<FormattedMessage id={"ui-party.other.activity.review"}/>}
          footer={footer}
          style={{ width:'350px' }}
        >
          <Row center="xs">
            <Col xs={12}>
              <TextField
                  label={<FormattedMessage id={"ui-party.loans.columns.party.partyName"}/>}
                value={verifyParams.partyName}
                noBorder
                disabled
              />
            </Col>

          </Row>
          <Row center="xs">
            <Col xs={12}>
              <Select
                label={<FormattedMessage id={"ui-party.other.activity.review"}/>}
                dataOptions={[
                  { value: '1', label: intl.formatMessage({id:"ui-party.other.approved"}) },
                  { value: '2', label: intl.formatMessage({id:"ui-party.other.unapproved"}) },

                ]}
                id="status"
                validationEnabled
              />
            </Col>
          </Row>
          <Row center="xs">
            <Col xs={12}>
              <TextArea
                label={intl.formatMessage({id:"ui-party.other.activity.review.instructions"})}
                id="auditDescription"
                defaultValue={intl.formatMessage({id:"ui-party.other.approved"})}
                style={{ height:'200px' }}
              />
            </Col>
          </Row>
        </Modal>
      );
    }
}

VerifyCafe.propTypes = {};

export default VerifyCafe;
